// test.js
/*
 * 1. Get user selection
 * 2. wrap span tags at beginning and end of selection
 * 3. put desired attributes on span tags
 * 4. get relative position of selection within DOM
 * 5. get complete source code of new DOM
 * 6. ???
 * 7. Profit!
 */
(function() {
    
    function selection() {
        try {
            var range = document.createRange();
            var sel = window.getSelection();
            range = sel.getRangeAt(0);
            if(!range.collapsed) {
                var new_elem =document.createElement('span');
                new_elem.setAttribute('id', 'rangeSpan1');
                
                txt = range.cloneContents();
                new_elem.appendChild(txt);
                
                range.deleteContents(); /* delete the current selection */
                range.insertNode(new_elem); /* add the newly created element */
                
                console.log(new_elem.tagName);
                console.log(new_elem.innerHTML);
                
                var p = new_elem.parentNode;
                while(p) {
                    console.log(p.parentNode);
                    p = p.parentNode;
                }
                
                sel.removeAllRanges();
            } else {
                write("No selection was made.");
            }
        } catch(Error) {
            write("Error finding selection.");
        }
    };
    
    window.onload = function() {
        document.getElementById('highlight').addEventListener("click", selection, false);
    };
    
})();